<template>
	
	<view class="main-wapper">
		
		<view class="main-information">
			 <view class="head-portrait">
			 	<img src="../../static/universal/touxiang.jpg" alt="" />
				<view class="nicker">
					昵称
				</view>
			 </view>
			 
			 <view class="personal-information"> 
				<text>个人信息</text>
				<img src="../../static/universal/arrows_b.png" alt="" />
			 </view>
		</view>
		
		
		<view class="contribution-wapper">
			<view class="contribution-box">
				<view class="title">
					贡献值
				</view>
				
				<view class="contribution">
					<text>0.00</text>
					<img src="../../static/universal/arrows_b.png" alt="" />
				</view> 
			</view>
			
			<view class="wallet-box">
				<view class="wallet-title">
					我的钱包(元)
				</view>
				
				<view class="wallet">
					<text>0.00</text>
					<img src="../../static/universal/arrows_b.png" alt="" />
				</view> 
			</view>
			 
		</view>
		
		
		
		<view class="backgroude-message">
			<view class="sign">
				<view class="everday">
					每日签到
				</view>
				<view class="Recent-des">
					做任务赢海量积分
				</view>
			</view>
			
			<view class="message">
				<view class="Recent">
					最近消息
				</view>
				<view class="Recent-des">
					0条信息未处理
				</view>
			</view>
		</view>
		
		<view class="wapper-banner">
			<view class="banner">
				<img src="../../static/universal/images.jpg" alt="" />
			</view>
		</view>
		
		<view class="btn-wapper">
			<view class="">
				<img src="" alt="" />
				<text>我的评估</text>
			</view>
		</view>
		
	</view>

	
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f5f5f5;
}
	
.main-information{
	height: 200rpx;
	display: flex;
	margin: 0 20rpx;
	justify-content: space-between;
	align-items: center;
	.head-portrait{
		width: 240rpx;
		height: 200rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		.nicker{
			display: block;
			margin-left: 20rpx;
		}
		img{
			display: block;
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%; 
			border: 2rpx  solid  #ff6a2b;
		}
	}
	
	.personal-information{
		width:30%;
		// display: block;
		display: flex; 
		img{
			width: 60rpx;
			height: 60rpx;
		}
	}
	 
	
}


.contribution-box{
		width: 50%;
		img{
			width: 60rpx;
			height: 60rpx;
			display: block;
			
		}
		text{
			display: block;
			
		}
	}
	
.wallet-box{
	width: 50%;
	img{
		width: 60rpx;
		height: 60rpx;
	}
}


.contribution-wapper{
	display: flex;
	width: 80%;
	margin: 0 auto;
	background-color: #feebd8;
	// height: 200rpx;
	padding: 32rpx;
	border-radius: 20rpx;
}

.contribution{
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
}
.wallet{
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
}

.backgroude-message{
	width: 85%;
	background-color: #fff;
	margin: 0 auto;
	display: flex;
	height: 150rpx;
	padding: 32rpx;
	border-radius: 12rpx;
	justify-content: space-between;
	.sign{
		width: 42%;
		padding: 10rpx;
		background-color:#f3f3f3;
		padding: 20rpx;
		border-radius: 15rpx;
		// background: url('../../static/universal/tipshot.png');
		.Recent-des{
			display: block;
			margin-top: 10rpx;
		}
	}
	.message{
		width: 42%;
		padding: 10rpx;
		background-color:#f3f3f3;
		padding: 20rpx;
		border-radius: 15rpx;
		// background: url('../../static/universal/tipsnew.png');
		.Recent-des{
			display: block;
			margin-top: 10rpx;
		}
	}
}


.wapper-banner{
	width: 100%;
	height: 150rpx;
	margin-top: 20rpx;
	border-radius: 15rpx;
	.banner{
		border-radius: 15rpx;
		width: 90%;
		margin: 0 auto;
		img{
			display: block;
			width: 100%;
			height: 150rpx;
		}
	}
}

</style>
